<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{login.title}"></title>

    <script th:inline="javascript">

        // 生成随机验证码
        function generateCaptcha() {
            const captchaChars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
            let captcha = '';
            for (let i = 0; i < 4; i++) {
                captcha += captchaChars.charAt(Math.floor(Math.random() * captchaChars.length));
            }
            return captcha;
        }

        // 绘制验证码
        function drawCaptcha() {
            const captcha = generateCaptcha();
            const captchaElement = document.getElementById('captcha-image');
            captchaElement.innerHTML = captcha;
            captchaElement.dataset.captcha = captcha;

            // 添加干扰线
            captchaElement.style.background = `#${Math.floor(Math.random()*16777215).toString(16)}`;
            captchaElement.style.color = `#${Math.floor(Math.random()*16777215).toString(16)}`;
        }




        $(function () {
            // // 初始化验证码
            // drawCaptcha();
            //
            // // 点击刷新验证码
            // document.getElementById('captcha-image').addEventListener('click', drawCaptcha);
            //
            // // 初始化密码错误计数和上次错误密码，从sessionStorage获取或设置为0/空
            // let passwordErrorCount = sessionStorage.getItem('passwordErrorCount') || 0;
            // passwordErrorCount = parseInt(passwordErrorCount);
            // let lastIncorrectPassword = sessionStorage.getItem('lastIncorrectPassword') || '';
            //
            // // 根据错误计数控制验证码显示
            // const captchaGroup = document.getElementById('captcha-group');
            // if (passwordErrorCount >= 3) {
            //     captchaGroup.style.display = 'block';
            // } else {
            //     captchaGroup.style.display = 'none';
            // }

            $("#login-sumbit-id").click(function (e) {
                // e.preventDefault();
                // // 检查是否需要验证验证码
                // if (passwordErrorCount >= 3) {
                //     const userCaptcha = document.getElementById('captcha-input').value;
                //     if (!userCaptcha || userCaptcha.trim() === '') {
                //         alert('请输入验证码');
                //         return;
                //     }
                //
                //     // 验证验证码正确性
                //     const correctCaptcha = document.getElementById('captcha-image').dataset.captcha;
                //     if (userCaptcha.toUpperCase() !== correctCaptcha.toUpperCase()) {
                //         alert('验证码错误，请重新输入');
                //         drawCaptcha();
                //         return;
                //     }
                // }
                //
                // // 然后执行其他表单验证
                // var flag = $("#login-form-id").checkDom()
                // if (!flag) {
                //     return
                // }
                //
                // // 这里应该是实际的密码验证逻辑
                // // 为了演示，我们模拟密码验证
                // // 实际项目中，应该替换为真实的AJAX请求或表单提交
                // // 模拟密码错误处理函数
                // function handlePasswordError() {
                //     const currentPassword = document.querySelector('input[name="password"]').value;
                //     passwordErrorCount++;
                //     sessionStorage.setItem('passwordErrorCount', passwordErrorCount);
                //
                //     // 检查是否连续输入相同的错误密码
                //     if (currentPassword === lastIncorrectPassword) {
                //         alert('您已经连续两次输入相同的错误密码，请确认后再试');
                //     }
                //     lastIncorrectPassword = currentPassword;
                //     sessionStorage.setItem('lastIncorrectPassword', lastIncorrectPassword);
                //
                //     if (passwordErrorCount >= 3) {
                //         captchaGroup.style.display = 'block';
                //         alert('连续输错三次密码，请输入验证码');
                //     } else {
                //         alert('密码错误，您还有 ' + (3 - passwordErrorCount) + ' 次机会');
                //     }
                // }
                //
                // // 模拟密码验证成功处理函数
                // function handlePasswordSuccess() {
                //     // 重置错误计数
                //     passwordErrorCount = 0;
                //     sessionStorage.setItem('passwordErrorCount', passwordErrorCount);
                //     captchaGroup.style.display = 'none';
                //     $("#login-form-id").submit();
                // }
                //
                // // 实际项目中，这里应该是AJAX调用后端接口验证密码
                // // 为了演示，我们假设密码为"123456"时验证成功
                // const userPassword = document.querySelector('input[name="password"]').value;
                // if (userPassword === '123456') {
                //     handlePasswordSuccess();
                // } else {
                //     handlePasswordError();
                // }
                $("#login-form-id").submit();
            })//end login-sumbit-id
        })//ready






    </script>
    <style>
        body {
            display: flex;
            flex-direction: column;
        }

        body > header {
            display: flex;
            width: 100%;
            justify-content: space-between;
            padding: 10px;
            align-items: center;
            height: 100px;
        }

        body > header > img {
            height: 80px;
        }

        body > header > nav {
            width: 150px;
            display: flex;
            justify-content: space-between;
            padding-right: 20px;
        }

        body > article {
            flex-grow: 1;
            background-color: #d4efec;
            width: 100%;
            display: flex;
            align-items: center;
        }

        body > article > section {
            flex-grow: 1;
            display: flex;

        }

        body > article > form {
            flex-basis: 300px;
            margin-right: 30px;
        }

        #login-sumbit-id {
            width: 100%;
        }
        #register-btn-id{

            width: 100%;
            background-color: #4cae4c;
        }
        #forgotPassword-btn-id{
            width: 100%;
            background-color: #4cae4c;
        }


    </style>
</head>
<body>
<header>

    <img th:if="${session.lang} eq 'en'" th:src="@{/assets/images/logo_en.png}">
    <img th:unless="${session.lang} eq 'en'" th:src="@{/assets/images/logo_zh.png}">

    <nav>

        <a th:href="@{/login/login(lang=en)}" th:text="#{login.english}"></a>
        <a th:href="@{/login/login(lang=zh)}" th:text="#{login.chinese}"></a>
    </nav>
</header>
<article>
    <section>
        <img th:src="@{/assets/images/pic.png}">
    </section>


    <form id="login-form-id" method="post" action="verification">
        <div class="form-group">
            <span th:text="#{login.user.name}"></span>
            <input class="form-control" name="username"
                   th:placeholder="#{login.user.name.plch}"
                   th:title="#{login.user.name.plch}"
                   pattern="^.{4,}$"
            >

        </div>

        <div class="form-group">
            <span th:text="#{login.user.password}"></span>
            <input class="form-control" name="password" type="password"
                   th:placeholder="#{login.password.plch}"
                   th:title="#{login.password.plch}"
                   pattern="^.{6,}$"
            >
        </div>

        <div class="form-group" id="captcha-group">
            <span th:text="#{login.captcha}"></span>
            <div style="display: flex; gap: 10px;">
                <input class="form-control" name="captcha" id="captcha-input"
                       th:placeholder="#{login.captcha.plch}"
                       th:title="#{login.captcha.plch}"
                       pattern="^.{4,}$"
                >
                <div id="captcha-image" style="width: 120px; height: 40px; background-color: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; letter-spacing: 5px; cursor: pointer;"></div>
            </div>
        </div>

        <div style="display: flex; gap: 10px; margin-bottom: 10px;">
            <a id="register-btn-id" class="btn btn-primary btn-group-lg flex-fill" th:href="@{/register/page}" th:text="#{register.title}"></a>
            <a id="login-sumbit-id" class="btn btn-success btn-group-lg flex-fill" href="#" th:text="#{login.submit}"></a>

        </div>

        <div style="display: flex; gap: 10px; margin-bottom: 10px;">
            <a href="#" th:href="@{/login/forgotPassword}" id="forgotPassword-btn-id" class="btn btn-default btn-group-lg flex-fill" th:text="#{forgot.password}"></a>
        </div>
    </form>






</article>

<!--  <div>-->
<!--        <a th:href="@{/login/login(lang=zh)}" th:text="#{login.chinese}"></a>-->
<!--        <a th:href="@{/login/login(lang=en)}" th:text="#{login.english}"></a>-->
<!--        <a id="open-dialog-id">打开</a>-->
<!--    </div>-->
<!--    <form method="post" action="verification">-->
<!--        <div>-->
<!--            <span th:text="#{login.user.name}"></span>-->
<!--            <input name="username">-->
<!--        </div>-->

<!--        <div>-->
<!--            <span th:text="#{login.user.password}"></span>-->
<!--            <input name="password" type="password">-->
<!--        </div>-->

<!--        <button th:text="#{login.submit}"></button>-->
<!--    </form>-->
</body>
</html>